<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib2/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib2//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
        function Fun(){
            const [key,setValue]=React.useState(10)
            const input=React.useRef()
         React.useEffect(()=>{
             let res=setInterval(()=>{
              setValue((setValue)=>setValue+1)
              console.log('key变化了')
             },1000)
             return ()=>{
                clearInterval(res)//在组件卸载之前可以做的事(一般是清除定时器)
             }
         },[key])
         function inputBlur(){
             console.log(input)
         }
         function unMount(){
             ReactDOM.unmountComponentAtNode(document.getElementById('test'))
         }
         return (<div>
                 我是fragment标签,我可以省略div标签,自身就想到与一个vue中的template标签一样，
                 只是起包裹作用，不起任何实际作用(改地方只做称述)
                 {key}
                 <button onClick={unMount}>点我卸载组件</button>
                 <h2>effecthook是组件更新，组件卸载之前，组件渲染完成三个生命周期的集大成者</h2>
                 <h2>使用refhook时:ref必须是{}形式的</h2>
                 <input ref={input} onBlur={inputBlur}/>
                </div>)
        }
        ReactDOM.render(<Fun/>,document.getElementById('test'))
        </script>
</body>
</html>